<template>
	<view class="pay-log">
		<view class="title">
				<picker class="picker" mode="date" :value="date" fields="month"
					:range="data.array" range-key="name" :start="startDate" :end="endDate"
					@change="getDate">
					<text class="uni-input">{{date == ''?'请选择时间':date}}</text>
					<uni-icons type="bottom" color="#000000"  size="32r" />
				</picker>
		</view>
		<template v-if="state">
		<uni-card  v-if="listData.length != 0" :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 20rpx'" :padding="0">
<!-- 			<template v-slot:title>
				<view class="title">
						<picker class="picker" mode="date" :value="date" fields="month"
							:range="data.array" range-key="name" :start="startDate" :end="endDate"
							@change="getDate">
							<text class="uni-input">{{date == ''?'请选择时间':date}}</text>
							<uni-icons type="bottom" color="#000000"  size="32r" />
						</picker>
				</view>
			</template> -->
			<view class="u-list">
				<uni-list :border="false">
					<uni-list-item :border="false" class="list" :key="itme.id" v-for="itme in listData">
						<view class="list-view" slot="header">
						   <text class="text">{{itme.content || ''}}</text>
						   <text class="text2">{{itme.create_time || ''}}</text>
						</view>
						<view class="list-view" slot="body">
						   <text class="text1 text3">- {{itme.change_balance || '0.00'}}</text>
						   <!-- <text class="text2 text3">金额：￥298</text> -->
						</view>
					</uni-list-item>
				</uni-list>
				<uni-load-more iconType="auto" :status="status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
			</view>
		</uni-card>
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;" v-else>
			<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
		</view>	
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		// let day = date.getDate();
		if (type === 'start') {
			year = year - 3;
		}
		month = month > 9 ? month : '0' + month;;
		// day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}`;
	}
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				date: '', // 当前时间
				startDate: getDate('start'), // 查找的最早日期
				endDate: getDate(), // 查找的最晚时间
				listData:[], // 列表数据
				state:true, // 默认状态
				page:1, // 初始页码
				total:0, // 数据总条数
				status: 'more', // 加载状态
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				}
			};
		},
		onPullDownRefresh() {
			let _this = this
			// 下拉刷新时触发
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 重置 data() 数据
					Object.assign(_this.$data, _this.$options.data())
					_this.getClick()
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		onLoad() {
			this.getClick(this.page)
		},
		methods:{
			/**
			 * 时间选择器 确定后触发
			 * @param {Object} e 选择时间对应的数据 more 加载前  loading 加载中  no-more 没有更多数据
			 */
			async getDate(e) {
				Object.assign(this.$data, this.$options.data())
				this.date = e.detail.value
				this.getClick(this.page)
				
			},
			/**
			 * @param {Object} e 加载更多的状态 
			 */
			clickLoadMore(e) {
				console.log(e.detail)
				if(e.detail = 'no-more') return this.status = 'no-more'
				this.status = 'loading'
				this.page += 1
				this.getClick(this.page)
			},
			/**
			 * 请求数据
			 */
			async getClick(page=1,limit = 10) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelpersonal/check',{
						type:3,
						page:page,
						limit:limit,
						start_time:this.date,
					})
					this.listData = [...this.listData,...res.data]
					this.state = this.listData.length
					console.log('this.state',this.state)
					this.total = res.total
					if(this.page >= res.last_page) return this.status = 'no-more'
					this.status = 'more'
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
.pay-log {
	.uni-card {
		border-radius: 20rpx;
	}
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
		margin-left: 35rpx;
		// .picker {
		// 	flex: 1;
		// 	margin-right: 20rpx;
		// }
		.picker {
			display: flex;
			align-items: center;
			border: 1px solid #CCCCCC;
			height: 60rpx;
			margin-right: 20rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
			.uni-input {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				line-height: 60rpx;
			}
		}
		.zhichu {
			.zc-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			} 
			.zc-text1 {
				font-size: 34rpx;
				font-weight: 600;
				color: #000000;
			}
		}
	}
	.u-list {
		margin-bottom: 40rpx;
		.list {
			.uni-list-item__container {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
			}
			.list-view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				.text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}
				.text1 {
					font-size: 40rpx;
					font-weight: normal;
					color: #FF4B4B;
				}
				.text2 {
					font-size: 24rpx;
					font-weight: normal;
					color:rgba($color: #000000, $alpha: 0.4);
				}
				.text3 {
					text-align: right;
				}
			}
		}
	}
	
}
</style>

